import 'package:beautiful_demo/common/res.dart';

import 'controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mvc/flutter_mvc.dart';

///description:
class MainPage extends BasePage<MainController> {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        c.onWillListener();
        return false;
      },
      child: Container(
        color: resBackgroundColorF2,
        child: Stack(
          children: [
            Positioned.fill(
                child: MvcTabView(
              controller: c.tabController,
              children: c.childrenController,
            )),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                decoration: BoxDecoration(
                    color: const Color(0xf7ffffff),
                    boxShadow: const [
                      BoxShadow(
                          color: Color(0x11333333),
                          offset: Offset(0, -5),
                          blurRadius: 5)
                    ],
                    borderRadius:
                        resBorderRadius(topLeft: 22.dp, topRight: 22.dp)),
                padding:
                    EdgeInsets.only(left: 10.dp, right: 10.dp, bottom: 10.dp),
                child: SafeArea(
                  top: false,
                  child: SizedBox(
                    height: 45.dp,
                    child: Stateful(
                        bind: () => [c.tabController.index],
                        builder: (context) {
                          return Row(
                            children: [
                              _buildItem('images/home_home_default.png',
                                  'images/home_home_select1.png', 29.dp, 0),
                              _buildItem('images/home_market_default.png',
                                  'images/home_market_select1.png', 29.dp, 1),
                              Stateful(
                                bind: ()=>[c.tips],
                                builder: (context) {
                                  return _buildItem('images/home_chat_default.png',
                                      'images/home_chat_select1.png', 26.dp, 2,
                                      tips: c.tips);
                                }
                              ),
                              _buildItem('images/home_mine_default.png',
                                  'images/home_mine_select1.png', 26.dp, 3),
                            ],
                          );
                        }),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildItem(
      String defaultAsset, String selectAsset, double size, int index,
      {int tips = 0}) {
    final isSelect = index == c.tabController.index;
    final image = isSelect ? selectAsset : defaultAsset;
    final s = isSelect ? size + 4.dp : size;
    final t=tips>99?"99+":tips.toString();
    return Expanded(
        child: GestureDetector(
      onTap: () => c.onTabItemClick(index),
      child: Stack(
        children: [
          Container(
            color: const Color(0x01ffffff),
            alignment: Alignment.center,
            child: Image.asset(
              image,
              width: s,
              height: s,
            ),
          ),
          if (tips > 0)
            Container(
              alignment: Alignment.center,
              margin: EdgeInsets.only(left: 24.dp, bottom: 22.dp),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    padding: EdgeInsets.only(
                        left: 3.dp, right: 3.dp,),
                    constraints: BoxConstraints(minWidth: 20.dp,maxHeight: 20.dp),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: resMainColor,
                        borderRadius: BorderRadius.circular(30.dp),
                        border: Border.all(color: Colors.white, width: 0.5)),
                    child: Text(
                      t,
                      style: resTextStyle.copyWith(
                          color: Colors.white, fontSize: 10.sp),
                    ),
                  ),
                ],
              ),
            )
        ],
      ),
    ));
  }
}
